<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>照片墙</title>
		<style>
			div{
				width:1050px;
				height:500px;
				padding: 50px;
				margin: auto;
				margin-top: 50px;
				margin-right: 500px;
				position: relative;
			}
			div img{
				width:200px;
				height;200px;
				padding: 5px;
				background: #FFF;
				border: 1px solid #ddd;
				position: absolute;
				z-index: 1;
			}
			img:nth-of-type(1){
				transform: rotate(-15deg) scale(1.5);
				top: 0px;
				left: 300px;
				
			}
			img:nth-of-type(3){
				transform:rotate(-20deg) ;
				top: 20px;
				left: 650px;
				z-index: 2;
			}
			img:nth-of-type(2){
				transform: rotate(30deg);
				top: -10px;
				left: 500px;
				z-index: 3;
				
			}
			img:nth-of-type(4){
				transform: rotate(20deg) scale(1.5);
				top: 10px;
				left: 900px;
				z-index: 2;
			}
			img:nth-of-type(5){
				transform: rotate(20deg) scale(1.1);
				top: 200px;
				left: 250px;
				z-index: 2;
				}
			img:nth-of-type(6){
				transform: rotate(-20deg);
				top: 200px;
				left: 450px;
				z-index: 5;
			}
			img:nth-of-type(7){
				transform: rotate(-30deg) scale(1.5);
				top: 200px;
				left: 650px;
			}
			img:nth-of-type(8){
				transform: rotate(-20deg);
				top: 150px;
				left: 850px;
			}
			img:nth-of-type(9){
				transform: rotate(15deg) scale(1.5);

				right: 50px;
				bottom: 180px;
				z-index: 5;
			}
			img:nth-of-type(10){
				transform: rotate(10deg) scale(1.5);
			
				right: -80px;
				bottom:230px;
				z-index: 4;
			}
			img:hover {
				transform: rotate(0deg) scale(2);
				box-shadow: 5px 5px 5px #ddd;
				z-index: 999;
				transition: all 0.6s ease-in-out 0.5s;
			}
		</style>
	</head>
	<body>
		<div >
			<img src="img/7.jpg"/>
			<img src="img/8.jpg" />
			<img src="img/4.jpg" />
			<img src="img/3.jpg" />
			<img src="img/6.jpg" />
			<img src="img/1.jpg" />
			<img src="img/10.jpg" />
			<img src="img/2.jpg" />
			<img src="img/9.jpg" />
			<img src="img/5.jpg" />
		</div>
	</body>
</html>
